<template>
  <div class="container">
    <div class="header box">
      <h3>简书</h3>
      <p>精彩文章免费看</p>
      <button>立即下载</button>
    </div>
    <div class="middle box">
      <div class="text">
        <p>热门专题</p>
        <p>换一批</p>
      </div>
      <ul class="tag">
        <li>读书</li>
        <li>手绘</li>
        <li>摄影</li>
        <li>故事</li>
        <li>旅行</li>
        <li>自然科普</li>
        <li>读书</li>
        <li>互联网</li>
        <li>手绘</li>
        <li>故事</li>
        <li>自然科普</li>
        <li>读书</li>
      </ul>
    </div>
    <div class="footer box">
      <div class="content">
        <div class="left">
          <h4>vue 3.2中setup语法糖与vue2.0script区别</h4>
          <p>1.起初vue2.0+暴露变量必须return出来，template中才能使用。</p>
          <p class="bottom">2.009 秒怂的哈士奇爱吃西瓜</p>
        </div>
        <div class="right">
          <img src="@/assets/logo.png" alt="">
          <p>打开App阅读</p>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <h4>vue 3.2中setup语法糖与vue2.0script区别</h4>
          <p>1.起初vue2.0+暴露变量必须return出来，template中才能使用。</p>
          <p class="bottom">2.009 秒怂的哈士奇爱吃西瓜</p>
        </div>
        <div class="right">
          <img src="@/assets/logo.png" alt="">
          <p>打开App阅读</p>
        </div>
      </div>
    </div>
  </div>


</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body,
#app,
.container {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  background: #efefef;

  .box {
    background: #fff;
    padding: 10px 2px;
    margin-bottom: 10px;

    h3 {
      color: red;
    }

    button {
      background: red;
      width: 70px;
      border: none;
      border-radius: 20px;
      color: #fff;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
  }

  .middle {
    .text {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }

    .tag {
      display: flex;
      flex-wrap: wrap;

      li {
        border: 1px solid red;
        padding: 5px;
        margin: 5px;
        border-radius: 4px;
        color: red;
      }
    }
  }
  .footer{
    .content{
      padding: 12px 6px;
      display: flex;
      justify-content: space-between;
      border-radius: 1px solid #efefef;

      .left{
        h4{
          line-height: 20px;
          margin-bottom: 10px;
        }
        .bottom{
          line-height: 40px;
          color: #eee;
        }
      }
      .right{
        img{
          width: 100px;
        }
        p{
          color: red;
        }
      }
    }
  }
}
</style>